import React, { PureComponent } from 'react';
import {
  Form, Checkbox, Drawer, Input, Col, Row, Button,
} from 'antd';
import { connect } from 'dva';
import StandardTable from '@/components/StandardTable';

@connect(({ AccountManage, loading }) => ({
  AccountManage,
  loading: loading.models.AccountManage,
}))

@Form.create()
class selectEnterprise extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      companyList: {},
    };
  }


  componentWillReceiveProps(nextProps) {
    const { companyList = {} } = nextProps;
    this.setState({
      companyList: companyList,
    });
  }

  handleStandardTableChange = (pagination) => {
    const { dispatch, selectedRows } = this.props;
    const { formValues } = this.state;
    const params = {
      pageNo: pagination.current,
      pageSize: 15,
      ...formValues,
    };
    dispatch({
      type: 'AccountManage/enterpriseList',
      payload: {
        ...params,
        accountNo: selectedRows.accountNo,
      },
    });
  };
  handleSearch = (e) => {
    e.preventDefault();
    const { searchEnterprise, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
      };
      searchEnterprise(values);
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { SelectComView, handleBindEnterprise, handleSelectEnterprise } = this.props;
    const { companyList } = this.state;
    const CheckboxChange = (val, e, index) => {
      let cloneData = JSON.parse(JSON.stringify(companyList));
      cloneData.data[index].checked = !val.checked;
      this.setState({
        companyList: cloneData,
      });
    };

    const columns = [
      {
        title: '',
        key: 'dataIndex',
        render: (val, record, index) =>
          <Checkbox
            checked={val.checked}
            onChange={() => CheckboxChange(val, event, index)}/>,
      },
      {
        title: '企业名称',
        dataIndex: 'enterpriseName',
        key: 'enterpriseName',
      },
      {
        title: '企业法人',
        dataIndex: 'legalName',
        key: 'legalName',
      },

    ];
    const onCancel = () => {
      handleBindEnterprise(false, []);
    };
    return (
      <Drawer
        width={800}
        placement="right"
        closable={false}
        onClose={onCancel}
        visible={SelectComView}>
        <Form layout="inline" onSubmit={this.handleSearch} hideRequiredMark>
          <Row type="flex" justify="start">
            <Col>
              <Form.Item label="企业名称">
                {getFieldDecorator('enterpriseName')(<Input placeholder="请输入企业名称"/>)}
              </Form.Item>
            </Col>
            <Col>
              <Button type="primary" htmlType="submit" style={{ marginTop: '5px' }}>
                查询
              </Button>
            </Col>
          </Row>
        </Form>
        <StandardTable
          selectedRows={[]}
          data={companyList ? companyList : []}
          rowKey={'enterpriseNo'}
          rowSelectHide={true}
          columns={columns}
          onChange={this.handleStandardTableChange}
        />
        <div
          style={{
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }}
        >
          <Button onClick={onCancel} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={() => handleSelectEnterprise(false, companyList)} type="primary">
            确定
          </Button>
        </div>
      </Drawer>

    );
  }

}

export default selectEnterprise;
